<template>
  <div>
    <el-col class="first-col">
      <el-row class="every-row"
        ><!--每日推荐-->
        <el-col style="height: inherit; width: inherit">
          <el-row style="height: 15%"
            ><!--文字-每日推荐-->
            <span class="title-font">每日推荐</span>
            <div class="title-bottom"></div>
          </el-row>
          <el-row style="height: 85%; width: 90%; margin-left: 60px">
            <el-carousel class="carousel" height="408px">
              <el-carousel-item v-for="item in recommendImg" :key="item">
                  <img :src="item" class="carousel-image" />
              </el-carousel-item>
            </el-carousel>
          </el-row>
        </el-col>
      </el-row>
      <el-row class="every-row"
        ><!--猜你喜欢-->
        <el-col style="height: inherit; width: inherit">
          <el-row style="height: 15%"
            ><!--文字-猜你喜欢-->
            <span class="title-font">猜你喜欢</span>
            <div class="title-bottom"></div>
          </el-row>
          <el-row class="showLike"
            ><!--展示书籍-->
            <el-col v-for="item in likeBooks" :key="item" class="four-col">
              <img :src="item.img" class="four-img" />
              <div class="showBookName">{{ item.name }}</div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row class="every-row"
        ><!--公告-->
        <el-col style="height: inherit; width: inherit">
          <el-row style="height: 15%"
            ><!--文字-信息公告-->
            <span class="title-font">信息公告</span>
            <div class="title-bottom"></div>
          </el-row>
          <el-row class="noticeRow">
            <el-col class="notice-col">
              <el-row class="notice-top"></el-row>
              <el-row class="notice-main">
                <el-col class="ye">
                  <el-row
                    v-for="(item, index) in notices"
                    :key="(item, index)"
                    class="notice"
                  >
                    <span>通知{{ index + 1 }}&nbsp;&nbsp;&nbsp;</span>
                    <span class="title" @click="openDialog(index)">{{
                      item.title
                    }}</span>
                  </el-row>
                  <el-dialog :visible.sync="dialogVisible" width="50%">
                    <el-row style="font-size: 17px">读者须知：</el-row>
                    <el-row
                      style="font-size: 17px; margin-top: 20px"
                      v-if="currentNotice"
                      >{{ currentNotice.content }}</el-row
                    >
                    <span slot="footer" class="dialog-footer">
                      <el-button type="primary" @click="dialogVisible = false"
                        >确 定</el-button
                      >
                    </span>
                  </el-dialog>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row style="width: 100%; height: 200px; background-color: white"
        ><!--bottom--><bottom
        ></bottom>
      </el-row>
    </el-col>
  </div>
</template>

<script>
import axios from "axios";
import bottom from "@/components/userCommon/bottom.vue";
export default {
  name: "main",
  components: {
    bottom,
  },
  mounted() {
    this.getNotices();
    this.getLikeBooks();
  },
  data() {
    return {
      recommendImg: [
        require("../../assets/img/user/recommend/recommend1.jpg"),
        require("../../assets/img/user/recommend/recommend2.jpg"),
        require("../../assets/img/user/recommend/recommend3.jpg"),
        require("../../assets/img/user/recommend/recommend4.jpg"),
      ],
      likeBooks: [
        { img: require("D:\\librarycover\\A-5.jpg"), name: "《贫穷的本质》" },
        { img: require("D:\\librarycover\\A-5.jpg"), name: "《贫穷的本质》" },
        { img: require("D:\\librarycover\\A-5.jpg"), name: "《贫穷的本质》" },
        { img: require("D:\\librarycover\\A-5.jpg"), name: "《贫穷的本质》" },
      ],
      notices: [
        { title: "关于中南大学2024年放假通知", content: "111" },
        { title: "关于中南大学2024年放假通知", content: "111" },
        { title: "关于中南大学2024年放假通知", content: "111" },
        { title: "关于中南大学2024年放假通知", content: "111" },
        { title: "关于中南大学2024年放假通知", content: "111" },
        { title: "关于中南大学2024年放假通知", content: "111" },
      ],
      dialogVisible: false,
      userId: "24123",
      currentNotice: null, // 当前打开的通知对象
    };
  },
  methods: {
    getNotices() {
      axios({
        method: "get",
        url: "http://localhost:5000/reader/notice",
        params: {},
      })
        .then((r) => {
          //发送成功
          this.notices = r.data.data.noticeArray;
        })
        .catch((r) => {
          console.log(r);
        });
    },
    getLikeBooks() {
      axios({
        method: "get",
        url: "http://localhost:5000/reader/like",
        params: {
          userId: this.userId,
        },
      })
        .then((r) => {
          //发送成功

          this.likeBooks = r.data.data.map((book) => ({
            img: require("D:/librarycover/" + book.img + ".jpg"),
            name: book.name,
          }));
        })
        .catch((r) => {
          console.log(r);
        });
    },
    openDialog(index) {
      // 检查索引是否有效，以及当前通知是否存在
      if (index >= 0 && index < this.notices.length) {
        // 打开对话框，并设置当前通知对象
        this.currentNotice = this.notices[index];
        this.dialogVisible = true;
      }
    },
  },
};
</script>
<style scoped>
.every-row {
  height: 480px;
  width: 85%;
  margin-bottom: 50px;
  display: flex;
  justify-content: center;
}
.first-col {
  display: flex;
  padding-top: 50px;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: rgba(237, 237, 237, 1);
}
.title-font {
  font-size: 30px;
  letter-spacing: 3px;
  font-weight: bold;
  margin-left: 30px;
}
.title-bottom {
  background-color: rgba(168, 189, 203, 1);
  width: 200px;
  height: 10px;
  border-radius: 5px;
}
.carousel {
  border-radius: 50px;
  box-shadow: 0px 0px 20px 20px rgba(0, 0, 0, 0.25);
}
.four-col {
  height: 80%;
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.four-img {
  width: 80%;
  height: 90%;
  margin-bottom: 20px;
  border-radius: 15px;
  box-shadow: 20px 20px 15px 3px rgba(0, 0, 0, 0.25);
}
.showLike {
  height: 85%;
  background-color: rgba(205, 198, 189, 1);
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-items: center;
}
.showBookName {
  letter-spacing: 3px;
  font-size: 20px;
}
.noticeRow {
  height: 85%;
  background-image: url("../../assets/img/user/others/notice.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: 50px;
}
.notice-top {
  height: 15%;
  width: 100%;
  background-color: rgba(143, 175, 185, 1);
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
}
.notice-main {
  background-color: rgba(255, 255, 255, 0.8);
  width: 85%;
  height: 67%;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.notice-col {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.notice {
  display: flex;
  margin-left: 10px;
  margin-top: 15px;
  padding-bottom: 15px;
  border-bottom: 2px dashed rgba(79, 76, 76, 0.788); /* 只在底部设置虚线边框 */
}
.title {
  cursor: pointer;
}
.title:hover {
  color: rgba(143, 175, 185, 1);
}
.ye {
  height: 100%;
  width: 85%;
  overflow: auto;
}
.ye::-webkit-scrollbar {
  width: 0px; /* 设置滚动条的宽度 */
}
.carousel-item-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.carousel-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

</style>